<template>
  <div class="webAbout">
    <div class="about">
      <div class="left-content">
        <div>
          <h3>吾志是什么？</h3>
          <p>吾志是一个注重隐私、简洁轻快的日记本。</p>
          <p>
            你是不是和我们一样，博客、微博、社交网络注册了一堆，却苦于没有一个能说心里话的地方？你是不是也经常被一些网站纷繁复杂的界面和功能弄的晕头转向？吾志是力求营造一个属于你的私人王国，在这里你可以真实的记录自己每一次生活感触。
          </p>
        </div>
        <div>
          <h3>吾志的隐私规则？</h3>
          <p>
            在吾志，你可以根据自己的喜好选择日记的受众。如果你不希望其他人看到你的日记，请在注册时或者"设置">"隐私"中选择"只有我自己"可见，这样其他用户就不能看到你的日记，你也不会出现在用户浏览页。同时，吾志屏蔽了所有的搜索引擎爬虫，最大限度的维护你在互联网的隐私。
          </p>
        </div>
        <div>
          <h3>为什么我的主页只能看到最近一天的日记？</h3>
          <p>
            我们认为每天都是一个新的开始，过去或喜或悲，都已成回忆。另外，你可以在登录以后点击"首页"看到你写过的所有日记。
          </p>
        </div>
        <div>
          <h3>吾志能不能修改、删除日记？</h3>
          <p>
            吾志不支持修改或者删除日记，我们认为第一次的记录往往是最真实可靠。
          </p>
        </div>
        <div>
          <h3>吾志能不能发图片、评论等等？</h3>
          <p>
            吾志崇尚简单和减法，我们坚信你最终也会从这个理念受益。所以在你急切的希望吾志支持某个功能时，不妨先静下心来想一想：这个功能真的这么重要吗？如果答案是肯定的，请在吾志的豆瓣小组发帖告诉我们。
          </p>
        </div>
        <div class="contact">
          <h3>联系我们</h3>
          <p>
            邮箱地址：<a @click="jump" href="help@wuzhi.me">help@wuzhi.me</a>
          </p>
          <p>
            豆瓣小组：<a href="https://www.douban.com/group/314117/"
              >吾志小组</a
            >
          </p>
          <p>新浪微博：<a href="https://weibo.com/5diarymama">吾志麻麻</a></p>
        </div>
      </div>
      <div class="right-btn">
        <div class="link">
          <router-link to="/home/webHomepage">我的吾志>></router-link>
        </div>
        <div class="link">
          <router-link to="/home/diary">写第一篇日记</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "webAbout",
  methods: {
    jump() {
      alert("即将打开外部链接，确定吗？");
    },
  },
  beforeRouteLeave(to, from, next) {
    // console.log(to.path);
    if (to.path == "/home/diary") {
      let userEmail = this.$store.state.userEmail;
      if (userEmail == null) {
        alert("请登录")
        this.$router.push({path:"/home/login"})
      }
    }
    next();
  },
};
</script>

<style lang="less" scoped>
.webAbout {
  width: 100%;
  .about {
    padding-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    .left-content {
      width: 620px;
      div {
        margin-bottom: 40px;
        h3 {
          color: #111;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        p {
          line-height: 35px;
          font-size: 14px;
        }
      }
      .contact {
        p {
          a {
            font-size: 14px;
            color: blue;
          }
        }
      }
    }
    .right-btn {
      width: 180px;
      .link {
        text-align: right;
        margin-bottom: 13px;
        &:nth-of-type(1) {
          a {
            color: blue;
            font-weight: bold;
            letter-spacing: 1px;
          }
        }
        &:nth-of-type(2) {
          a {
            color: #808080;
            font-size: 14px;
            border: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0px 1px 5px 1px #ccc;
            padding: 5px 10px;
          }
        }
      }
    }
  }
}
</style>